<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>文本输入框 Text inputs--JQUERY MOBILE 中文API站</title>
<meta name="keywords" content="JQUERY MOBILE 1.0正式版中文手册,Jquery Mobile 1.0,Jquery mobile,移动框架开发手册,darklord,JQUERY MOBILE 1.0正式版,JQUERY API,jqmapi,jqm,jquery," />
<meta name="description" content="Jquery mobile中文API站，Jquery mobile 1.0正式版本中文手册，提供最新版Jquery mobile移动web与应用开发帮助。" />
<link rel="stylesheet" type="text/css" href="../../style/Jqueryapi.css" tppabs="http://www.jqmapi.com/style/Jqueryapi.css" />
<script src="../../style/lib/jquery-1.6.1.min.js" tppabs="http://www.jqmapi.com/style/lib/jquery-1.6.1.min.js"></script>
<script src="../../style/jqmapi.js" tppabs="http://www.jqmapi.com/style/jqmapi.js"></script>
<script type="text/javascript">
$(function(){
	    $("ul.tab a").click(function() {
        var i = $("ul.tab a").index(this);
        $(this).parent().find("a").removeClass("current");
        $(this).addClass("current");
        $(".subtab").hide().eq(i).show();
        return false;
		});
	});
</script>
<link rel="shortcut icon" href="../../style/img/favicon.ico" />
</head>
<body>
<div class="nav">
<iframe width="250px" scrolling="no" frameborder="0" allowtransparency="true" src="../../nav.html" tppabs="http://www.jqmapi.com/nav.html" height="1300px"></iframe>
</div>
<div class="main">
<script src="style/jqmapi.js" tppabs="http://www.jqmapi.com/componts/form/style/jqmapi.js" type="text/javascript"></script>
<hr style="color:#595959;" />

<div class="content">
				<h1>文本输入框和文本输入域 Text inputs & Textareas</h1>
    <ul class="tab">
    	<a href="#" class="current">综述</a>
		<a href="#">选项</a>
    	<a href="#">方法</a>
    	<a href="#">事件</a>
    </ul><br>
    <div class="subtab">
				<div class="desc">
                <div>文本输入框和文本输入域是使用标准的html标记的，然后Jquery Mobile会让他们变得更吸引人而且易于触摸使用。查阅 data- attribute reference 来了解你可以给文本输入框添加的属性。</div>
				<h1>文本输入框 Text inputs</h1>
				<div>要使用标准字母数字的输入框，给input增加type="text"属性。注意要把label的for

属性设为input的id值，使他们能够在语义上相关联。如果在页面内不想看到label的话可

以隐藏label.</div>
                </div>
                
				<p class="indent"><strong>HTML 代码:</strong></p>
				<div class="code">
				  <pre>    &lt;label for=&quot;name&quot;&gt;Text Input:&lt;/label&gt;<br />    &lt;input type=&quot;text&quot; name=&quot;name&quot; id=&quot;name&quot; value=&quot;&quot;  /&gt;	</pre>
</div>
				<div class="desc">
				<div>这样就创建了一个Text输入框。默认的样式是宽度为父容器的100%，label在另一行上。</div>
                </div>
 	<p class="indent"><strong>文本输入框 Text Input:</strong></p>
  <img src="../../images/form element/text.png" tppabs="http://www.jqmapi.com/images/form%20element/text.png">
				<div class="desc">
				<div>你也可以用div容器包裹它们，并给他设定data-role="fieldcontain"属性，使他们在一个大的表单里在视觉上是成组的。</div>
                </div>
  <img src="../../images/form element/text2.png" tppabs="http://www.jqmapi.com/images/form%20element/text2.png">
  
				<h1>更多的文本输入类型 More text input types</h1>
				<div class="desc">
				<div>在jquery mobile中，你可以使用现存的和新的HTML5输入类型比如 <strong>password</strong>, <strong>email</strong>, <strong>tel</strong>, <strong>number</strong>和更多的类型。有一些类型会在不同的浏览器被渲染成不用的样式-比如Chrome会将range输入框渲染成滑动条-所以我们通过把类型转为text来标准化他们的外观（目前只作用于<strong>range</strong>和<strong>search</strong>元素）。你可以用page插件的选项来配置那些被降级为text的输入框的表现。
使用这些特殊类型的输入框的好处是，在智能手机上不同的输入框对应的是不同的触摸键盘。</div>
                </div>
<div class="desc">
				<div>给input设置type=&quot;password&quot;属性，可以设置为密码框，注意要把label的for属性设为input的id值，使他们能够在语义上相关联，并且要用div容器包裹它们，并给他设定data-role=&quot;fieldcontain&quot;属性。</div>
                </div>
                
				<p class="indent"><strong>HTML 代码:</strong></p>
				<div class="code">
				  <pre>&lt;div data-role=&quot;fieldcontain&quot;&gt;<br />    &lt;label for=&quot;password&quot;&gt;Password Input:&lt;/label&gt;<br />    &lt;input type=&quot;password&quot; name=&quot;password&quot; id=&quot;password&quot; value=&quot;&quot; /&gt;<br />&lt;/div&gt;	</pre>
</div>
  <hr /> 
  
<hr /> 
  
  				<h1>文本域 Textareas</h1>
				<div class="desc">
				<div>对于多行输入可以使用textarea元素。Jquery Mobile框架会自动加大文本域的高度防止出现在移动设备中很难使用的滚动条的出现。</div>
				<div>注意要把label的for属性设为input的id值，使他们能够在语义上相关联，并且要用div容器包裹它们，并给他设定data-role="fieldcontain"属性</div>                
                </div>
                
				<p class="indent"><strong>HTML 代码:</strong></p>
				<div class="code">
				  <pre>&lt;div data-role=&quot;fieldcontain&quot;&gt;<br />	&lt;label for=&quot;textarea&quot;&gt;Textarea:&lt;/label&gt;<br />	&lt;textarea cols=&quot;40&quot; rows=&quot;8&quot; name=&quot;textarea&quot; id=&quot;textarea&quot;&gt;&lt;/textarea&gt;<br />&lt;/div&gt;</pre>
</div>
 	<p class="indent"><strong>文本域 Textareas</strong></p>
  <img src="../../images/form element/area.png" tppabs="http://www.jqmapi.com/images/form%20element/area.png">
  <hr /> 
	<h1>文本域 Textareas</h1>
		<div class="desc">
			<div>这个插件会在包含有text输入框的任何页面自动初始化，不需要标记data-role属性，但是如果需要的话你可以在选择器上调用textinput插件。</div>               
		</div>
				<p class="indent"><strong>HTML 代码:</strong></p>
				<div class="code">
				  <pre>$('input').textinput();	</pre>
</div>
	<h1>被降级的输入框类型 Degraded input types</h1>
		<div class="desc">
			<div>jQuery Mobile降级了几种HTML5的几种输入类型为text型或者number型。比如range类型的输入框会被增强为自己定义的划动条，他们的类型会被设置为number,在划动条旁边会提供
一个number输入框使之可用。而SERACH输入框在我们给输入值添加主题后添加自己会被降级为text 。</div>    
			<div>page插件包含了一系列输入类型，当他们被设定为TRUE时意味着他们会被降级成为text类型，false意味着不处理他们，或者设为一个字符串比如"number"，意味着他们会被转为该类型。</div> 
			<div>你也可以通过page插件的<strong>degradeInputs</strong> 选项来配置那些被改变的输入类型，即通过外部的<strong>$.mobile.page.prototype.options.degradeInputs</strong> 来操作，它包含的属性有color, date, datetime, "datetime-local", email, month, number, range, search, tel, time, url, 和 week。
请确保把这个配置放于<strong>mobileinit</strong>绑定的事件处理的函数内，使得他能在页面加载的第一时间起作用。 </div> 
		</div>
    </div>
    
    
    <div class="subtab" style="display:none">
	  <div class="desc">
                <div>text输入框拥有如下选项：</div>
	<h1 class="method"><div class="wg">initSelector</div>
  		<div class="info">css选择器</div>
	</h1>
</div>
				<div class="desc">
				<div><strong>默认: "input[type='text'], input[type='search'], :jqmData(type='search'), input[type='number'], :jqmData(type='number'), input[type='password'], input[type='email'], input[type='url'], input[type='tel'], textarea, input:not([type])"</strong></div>
                </div>
				<div class="desc">
				<div>这个选项用来定义被自动初始化为输入框的选择器（元素类型，数据规则等）。如果要改变被初始化的元素，可以给<strong>mobileinit</strong>事件绑定这个选项:</div>
                </div>
				<p class="indent"><strong>HTML 代码:</strong></p>
				<div class="code">
				  <pre>$( document ).bind( &quot;mobileinit&quot;, function(){<br> <strong>  $.mobile.textinput.prototype.options.initSelector = &quot;.myInputs&quot;;</strong><br>});</pre>
</div>
<br>
	<h1 class="method"><div class="wg">theme</div>
  		<div class="info">字符串</div>
</h1>
				<div class="desc">
				<div><strong>默认null, 继承父容器</strong></div>
                </div>
				<div class="desc">
				<div>给这个组件的所有实例设定颜色主题。接受从a-z的一个字母来映射你的主题。默认情况下，它继承父容器的相同主题。这个选项也可以通过data-theme="a"的属性来配置</div>
                </div>
	  <p class="indent"><strong>HTML 代码:</strong></p>
				<div class="code">
				  <pre>$('.selector').textinput({ theme: &quot;a&quot; });
</pre>
</div>
    </div>
    
<div class="subtab" style="display:none">
	  <div class="desc">
                <div>text输入框拥有如下方法：</div>
	<h1 class="method"><div class="wg">enable</div>
  		<div class="info">使一个输入框可用</div>
	</h1>
</div>
	  <p class="indent"><strong>HTML 代码:</strong></p>
				<div class="code">
				  <pre>$('.selector').textinput('enable');</pre>
</div>
	<h1 class="method"><div class="wg">disable</div>
  		<div class="info">使一个输入框不可用</div>
</h1>
	  <p class="indent"><strong>HTML 代码:</strong></p>
	  <div class="code">
				  <pre>$('.selector').textinput('disable');	</pre>
</div>
</div>
    
 <div class="subtab" style="display:none">
	  <div class="desc">
                <div>可以给input元素直接绑定事件，可以使用jQuery Mobile的虚拟事件，或者绑定JavaScript的标准事件，例如change, focus, blur等。</div>
</div>
	  <p class="indent"><strong>HTML 代码:</strong></p>
				<div class="code">
				  <pre>$( ".selector" ).bind( "change", function(event, ui) {
  ...
});</pre>
</div>
	<h1 class="method"><div class="wg">create</div>
  		<div class="info">当input 被创建时触发</div>
</h1>
	  <p class="indent"><strong>HTML 代码:</strong></p>
	  <div class="code">
				  <pre>$( ".selector" ).textinput({
  <strong> create: function(event, ui) { ... }</strong>
});	</pre>
</div>
</div>   
    
    
    
    
</div>
</div>
<iframe id="iFrame1" width="160px" scrolling="no" frameborder="0" allowtransparency="true" src="../../adsense_r.html" tppabs="http://www.jqmapi.com/adsense_r.html" onload="this.height=iFrame1.document.body.scrollHeight" ></iframe>
</body>
</html>



